<!--纯文本、多行文本组件-->

<template>
  <div class="plain-text-comp w-h-full"
       :style="Object.assign({
         fontSize: component.compConfigData.fontSize + 'px',
         color: component.compConfigData.color,
         fontWeight: component.compConfigData.fontWeight,
         lineHeight: component.compConfigData.lineHeight + 'px',
         textAlign: component.compConfigData.textAlign,
         textIndent: component.compConfigData.textIndent + 'px',
         overflow: component.compConfigData.overflow,
         opacity: component.compConfigData.opacity
       }, $PnUtil.cssToVueStyleObj(component.compConfigData.customStyleCode))">
    <dynamic-marquee
        v-if="component.compConfigData.marquee && component.compConfigData.marquee.open"
        :direction="component.compConfigData.marquee.direction"
        :reverse="component.compConfigData.marquee.reverse"
        :repeat="component.compConfigData.marquee.repeat"
        :repeatMargin="component.compConfigData.marquee.repeatMargin"
        :speed="component.compConfigData.marquee.speed"
        :hoverPause="component.compConfigData.marquee.hoverPause"
        :pause="component.compConfigData.marquee.pause">
      <div :class="textContainerClass"
           :style="styleObject"
           :title="component.compConfigData.title"
           v-html="runCustomFilter(component.compConfigData.ds_resultObj)[0].value"></div>
    </dynamic-marquee>
    <div v-else
         :class="textContainerClass"
         :style="styleObject"
         :title="component.compConfigData.title"
         v-html="runCustomFilter(component.compConfigData.ds_resultObj)[0].value"></div>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  import DynamicMarquee from 'vue-dynamic-marquee'

  const _this = {
    name: 'PlainTextComp',
    mixins: [FuncCompMixin],
    components: {
      DynamicMarquee
    },
    attr: {
      version: '2.1',
      configDataTemp: Object.assign({
        title: '',
        text: '我是一段文本内容',

        fontSize: 20,
        color: '#fff',
        fontWeight: 'normal',
        lineHeight: 20,
        textAlign: 'left',
        textIndent: 28,
        overflow: 'hidden',
        opacity: 1,

        gradient: { // 渐变色
          open: false,
          angle: 90,
          startColor: '#448aff',
          endColor: '#18ffff',
          animation: false
        },

        marquee: {
          open: false,
          direction: 'column',
          reverse: true, // 翻转
          repeat: true, // 是否重复
          repeatMargin: 10, // 重复间距
          speed: { // 滚动速度
            type: 'pps',
            number: 50
          },
          hoverPause: true, // 鼠标滑入暂停
          pause: false, // 暂停
        }

      }, PnDesigner.buildFuncCompDatasourceField({
        ds_resultObjTemplate: [
          {
            field: 'value',
            remark: '文本值'
          }
        ],
        ds_resultObj: [
          {
            "value": "基于SpringBoot+Vue构建的数据可视化开发平台，满足你对数据大屏页面的一切想象"
          }
        ],
        ds_useFilter: true,
        ds_useTimer: true,
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildFuncCompInteractionConfiguration())
    },
    data() {
      return {}
    },
    mounted() {

      this.init();

      this.setTimer(() => {
        this.init()
      })

    },
    methods: {
      init () {
        this.initDatasource(() => {
          this.runCustomGlobalJsCode()
        }, (result) => {
          this.runCustomGlobalJsCode()
        });
      }
    },
    computed: {
      styleObject () {
        if (this.component.compConfigData.gradient) {
          return {
            '--angle': this.component.compConfigData.gradient.angle + 'deg',
            '--start-color': this.component.compConfigData.gradient.startColor,
            '--end-color': this.component.compConfigData.gradient.endColor
          }
        }else {
          return {}
        }
      },
      textContainerClass () {
        if (this.component.compConfigData.gradient && this.component.compConfigData.gradient.open) {
          if (this.component.compConfigData.gradient.animation) {
            return 'animation-text-container'
          }else {
            return 'static-text-container'
          }
        }else {
          return ''
        }
      }
    }
  };

  export default _this
</script>

<style scoped>
  .animation-text-container {
    background-image: -webkit-linear-gradient(left, var(--start-color), var(--end-color) 25%, var(--start-color) 50%, var(--end-color) 75%, var(--start-color));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: masked-animation 4s infinite linear;
  }
  .static-text-container {
    background-image: linear-gradient(var(--angle), var(--start-color), var(--end-color));
    -webkit-background-clip: text;
    color: transparent !important;
  }
  @-webkit-keyframes masked-animation {
    0%{ background-position: 0 0;}
    100% { background-position: -100% 0;}
  }
</style>
